
.main{
	padding: 14px 30px;
	box-sizing: border-box;
	width: 100%;	
	.wrap{		
		.title{
			font-size: 20px;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 28px;
			img{
				margin: 0 10px 0 18px;
			}
			p{
				float: left;
				&:nth-child(2){
					float:right;
					margin-right:8px;
					width: 60px;
					height: 26px;
					border-radius: 4px 4px 4px 4px;
					border: 1px solid #3BC4FC;
					text-align: center;
					line-height: 22px;
					box-sizing: border-box;
					margin-top: 3px;
					a{
						font-size: 16px;
						font-family: 'SourceHanSansCN';
						font-weight: 400;
						color: #3BC4FC;
					}
				}		
			}
		}
		.leftDiv{
			width: 1354px;
			// 实时数据
			.box1{
				height: 580px;
				background: url(../img/page2/box7.png) no-repeat center;
				background-size: 100%;
				margin-bottom: 20px;
				.content{
					margin-top: 20px;
					padding: 0 25px 0 45px;
					// 实时数据-筛选
					.filter{
						font-size: 18px;
						font-family:'SourceHanSansCN';
						font-weight: 400;
						color: #FFFFFF;
						text-align: right;
						select{
							width: 274px;
							height: 32px;
							background-color: transparent;
							border: 1px solid #448FFF;
							font-size: 18px;
							font-family:'SourceHanSansCN';
							font-weight: 400;
							color: #FFFFFF;
							margin-left: 5px;
							padding-left: 1em;
							box-sizing: border-box;
							option{
								background: #02152e;
							}
						}
					}
					.inner{
						// 左侧方框
						.inner_left{
							margin-top: 10px;
							width: 242px;
							.item{
								height: 103px;
								background: url(../img/page2/bg2-1.png) no-repeat center;
								background-size: 100%;
								margin-bottom: 20px;
								p{
									line-height: 41px;
									font-size: 18px;
									font-family: 'SourceHanSansCN';
									font-weight: 400;
									color: #FFFFFF;
									text-align: center;
									&:last-child{										
										font-weight: 400;
										color: #48E5FC;
										line-height: 62px;
										span{
											font-size: 30px;
										}
									}
								}
							}
						}
						// 右侧塔吊
						.inner_right{
							width: 900px;
							margin-left: 85px;
							margin-top: 23px;
							text-align: center;
							position: relative;
							.ta1{
								position: absolute;
								top: 5px;
								left: 376px;
								height: 415px;
								width: 124px;
								img{
									position: absolute;
									left: 0;
									bottom: 0;
								}
							}
							.ta2{
								position: absolute;
								top: 5px;
								right: 363px;
								height: 415px;
								width: 124px;
								img{
									position: absolute;
									left: 0;
									bottom: 0;
								}
							}
							.data{
								position: absolute;
								width: 255px;
								height: 130px;								
								box-sizing: border-box;
								padding: 35px 0 0 25px;
								.text{
									text-align: left;
									margin-left: 14px;
									p{
										font-size: 20px;
										font-family:'SourceHanSansCN';
										font-weight: 400;
										color: #48E5FC;
										margin-bottom: 20px;
										line-height: 20px;
										span{
											display: inline-block;
											font-size: 30px;
											font-family: 'DIN';
											font-weight: bold;
											color: #FFFFFF;
											width: 86px;
											height: 37px;
											line-height: 37px;
											border: 1px solid #216497;
											border-radius: 2px;
											text-align: center;
											margin-right: 5px;
										}
									}
								}
								&.data1{
									background: url(../img/page2/bg2-2.png) no-repeat center;
									background-size: 100%;
									left:6px;
									top: 50px;
								}
								&.data2{
									background: url(../img/page2/bg2-2.png) no-repeat center;
									background-size: 100%;
									left:6px;
									top: 254px;
								}
								&.data3{
									background: url(../img/page2/bg2-3.png) no-repeat center;
									background-size: 100%;
									right: 0;
									top: 50px;
								}
								&.data4{
									background: url(../img/page2/bg2-3.png) no-repeat center;
									background-size: 100%;
									right: 0;
									top: 254px;
								}
								
							}
							.line1{
								position: absolute;
								left: 254px;
								top: 130px;
							}
							.line2{
								position: absolute;
								left: 254px;
								top: 334px;
							}
							.line3{
								position: absolute;
								right: 248px;
								top: 130px;
							}
							.line4{
								position: absolute;
								right: 248px;
								top: 334px;
							}
						}
					}
				}
			}
			// 统计分析
			.box2{
				height: 354px;
				background: url(../img/page2/box8.png) no-repeat center;
				background-size: 100%;
				.filter{
					width: 235px;
					height: 40px;					
					box-sizing: border-box;
					text-align: center;
					background: url(../img/page2/bg2-8.png) no-repeat center;
					background-size: 100%;					
					font-size: 0;
					line-height: 0;
					margin-top: 20px;
					margin-right: 15px;
					span{
						display: inline-block;
						width: 50%;
						box-sizing: border-box;
						line-height: 40px;	
						height: 100%;
						font-size: 18px;
						font-family: 'SourceHanSansCN';
						font-weight: 400;
						color: rgba(255,255,255,0.7);
						cursor: pointer;
					}
					.active{
						background: url(../img/page2/bg2-9.png) no-repeat center;
						background-size: 100% 100%;	
						border-radius: 10px;
						color: rgba(255,255,255,1);
					}
				}
			}
		}
		.rightDiv{
			width: 487px;
			margin-left: 20px;
			// 运行状态
			.box1{
				height: 420px;
				background: url(../img/page2/box9.png) no-repeat center;
				background-size: 100%;
				margin-bottom: 20px;
				.content{
					padding:30px 20px 0;
					.top{
						width: 448px;
						height: 138px;
						background: url(../img/page2/bg2-5.png) no-repeat center;
						background-size: 100%;
						box-sizing: border-box;
						padding: 20px 15px;
						.avatar{
							float: left;
							width: 98px;
							height: 98px;
							background: url(../img/page2/bg2-4.png) no-repeat center;
							background-size: 100%;
							padding: 8px;
							box-sizing: border-box;
							img{
								width: 100%;
								height: 100%;
								border-radius: 100%;
							}
						}
						.info{
							float: left;
							width: 305px;
							margin-left: 12px;
							p{
								float: left;
								width: 50%;
								font-size: 16px;
								font-family:'SourceHanSansCN';
								font-weight: 400;
								color: #48E5FC;
								line-height: 32px;
								span{
									color: #FFFFFF;
								}
								&.long{
									width: 100%;
								}
							}
						}
					}
					ul{
						margin-top: 18px;
						li{
							float: left;
							width: 50%;
							line-height: 47px;
							margin-bottom: 10px;
							span{
								font-size: 16px;
								font-family:'SourceHanSansCN';
								font-weight: 400;
								color: #48E5FC;
								margin-left: 10px;
								&:last-child{		
									margin-left: 20px;
									font-family: 'DIN';
									font-weight: 500;
									color: #FEB332;
									font{
										font-size: 30px;
									}
								}
							}
						}
					}
				}
			}
			// 设备信息
			.box2{
				height: 514px;
				background: url(../img/page2/box10.png) no-repeat center;
				background-size: 100%;
				.content{
					padding: 35px 15px;
					ul{
						li{
							float: left;
							width: 219px;
							height: 63px;
							background: url(../img/page2/bg2-6.png) no-repeat center;
							background-size: 100%;
							margin-bottom: 10px;
							box-sizing: border-box;
							padding: 5px 9px;
							&:nth-child(odd){
								margin-right: 18px;
							}
							.img{
								margin-right: 18px;
								margin-top: 6px;
							}
							.txt{
								p{
									font-size: 16px;
									font-family: 'SourceHanSansCN';
									font-weight: 400;
									color: #FFFFFF;
									&:last-child{
										color: #48E5FC;
									}
								}
							}
						}
					}
					.nav{
						margin-top: 60px;
						span{
							display: inline-block;
							width: 147px;
							height: 48px;
							background: url(../img/page2/bg2-7.png) no-repeat center;
							background-size: 100%;
							text-align: center;
							margin-right: 2px;
							&:last-child{
								margin-right: 0;
							}
							a{
								font-size: 18px;
								font-family: 'SourceHanSansCN';
								font-weight: 400;
								color: #F0FAFF;
								line-height: 48px;
							}
						}
					}
				}
			}
		}
	}	
}

.tan{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;		
		background: rgba(27,27,27,0.4);
	}
	.inner{
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: -284px auto 0;
		width: 1116px;
		height: 567px;
		background: url(../img/page2/bg-tan.png) no-repeat center;
		background-size: 100%;
		.close{
			position: absolute;
			top: 25px;
			right: 30px;
			width: 20px;
			height: 20px;
			cursor: pointer;
		}
		.title{
			font-size: 24px;
			font-family: 'SourceHanSansCN';
			font-weight: 500;
			color: #FFFFFF;
			line-height: 72px;
			text-align: center;
		}
		.content{
			padding: 10px 35px;
			.thead{
				height: 48px;
				background: rgba(17,174,238,0.15);
				border-radius: 6px;
				font-size: 0;
				span{
					font-size: 18px;
					font-family: 'SourceHanSansCN';
					font-weight: 400;
					color: #48E5FC;
					line-height: 48px;
					text-align: center;
					display: inline-block;
				}
			}
			.tbody{
				margin-top: 10px;
				padding-bottom: 10px;
				height: 390px;
				overflow: auto;
				ul{
					display: table;
					width: 100%;
					li{
						display: table-row;
						font-size: 0;
						background: rgba(17,174,238,0.05);
						box-shadow: 0px 1px 0px 0px #1DA5EB;
						border-radius: 6px;
						&:nth-child(even){
							background: rgba(17,174,238,0.15);
						}						
						span{
							font-size: 18px;
							font-family: 'SourceHanSansCN';
							font-weight: 400;
							color: #EFF7F9;
							text-align: center;
							display: table-cell;
							padding: 7px 0;
							box-sizing: border-box;
							height: 96px;
							vertical-align: middle;
							img{
								width: 82px;
								height: 82px;
								vertical-align: middle;
							}
						}
					}
				}
			}
			.s1{
				width: 98px;
			}
			.s2{
				width: 135px;
			}
			.s3{
				width: 135px;
			}
			.s4{
				width: 96px;
			}
			.s5{
				width: 96px;
			}
			.s6{
				width:96px;
			}
			.s7{
				width: 130px;
			}
			.s8{
				width: 140px;
			}
			.s9{
				width: 100px;
			}
		}
	}
}